<template>
  <el-container>
    <el-aside width="300px">
      <el-menu router>
        <el-menu-item index="/home">主项目 home 页面</el-menu-item>
        <el-menu-item index="/about">主项目 about 页面</el-menu-item>
        <el-menu-item index="/app-angular7-hash/#/first">angular7-hash项目 first 页面</el-menu-item>
        <el-menu-item index="/app-angular7-hash/#/second">angular7-hash项目 second 页面</el-menu-item>
        <el-menu-item index="/app-angular7-history/first">angular7-history项目 first 页面</el-menu-item>
        <el-menu-item index="/app-angular7-history/second">angular7-history项目 second 页面</el-menu-item>
        <el-menu-item index="/app-angular9-hash/#/first">angular9-hash项目 first 页面</el-menu-item>
        <el-menu-item index="/app-angular9-hash/#/second">angular9-hash项目 second 页面</el-menu-item>
        <el-menu-item index="/app-angular9-history/first">angular9-history项目 first 页面</el-menu-item>
        <el-menu-item index="/app-angular9-history/second">angular9-history项目 second 页面</el-menu-item>
        <el-menu-item index="/app-jquery">jquery项目</el-menu-item>
        <el-menu-item @click="emitHashEvent" index="/app-react16-hash/#/home">react16-hash项目 home 页面</el-menu-item>
        <el-menu-item @click="emitHashEvent" index="/app-react16-hash/#/about">react16-hash项目 about 页面</el-menu-item>
        <el-menu-item index="/app-react16-history/home">react16-history项目 home 页面</el-menu-item>
        <el-menu-item index="/app-react16-history/about">react16-history项目 about 页面</el-menu-item>
        <el-menu-item index="/app-vue2-hash/#/home">vue2-hash项目 home 页面</el-menu-item>
        <el-menu-item index="/app-vue2-hash/#/about">vue2-hash项目 about 页面</el-menu-item>
        <el-menu-item index="/app-vue2-history/home">vue2-history项目 home 页面</el-menu-item>
        <el-menu-item index="/app-vue2-history/about">vue2-history项目 about 页面</el-menu-item>
        <el-menu-item index="/app-vue3-hash/#/home">vue3-hash项目 home 页面</el-menu-item>
        <el-menu-item index="/app-vue3-hash/#/about">vue3-hash项目 about 页面</el-menu-item>
        <el-menu-item index="/app-vue3-history/home">vue3-history项目 home 页面</el-menu-item>
        <el-menu-item index="/app-vue3-history/about">vue3-history项目 about 页面</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
      <div id="container"></div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  methods: {
    emitHashEvent () {
      // react hash 模式直接跳转路由不会响应，需要触发一下 hash 事件
      const event = new Event('hashchange');
      window.dispatchEvent(event);
    }
  }
}
</script>
<style>
body {
  margin: 0;
}
.el-container > .el-main {
  display: flex;
  justify-content: center;
}
.el-aside {
  max-height: 100vh;
}
</style>